<template>
	<view class="pb20">
		<u-navbar title="我的订单"></u-navbar>
		<u-tabs-swiper ref="tabs" :list="list" height="100" active-color="#1d336f" :is-scroll="false" :current="current"
			@change="tabsChange"></u-tabs-swiper>
		<view v-if="dataList != ''" v-for="(item,index) in dataList" class="mr15 ml15 br5 bg-fff mt15 pr15 pl15 " >
			<view class="dis-flex flex-between   bb " style="height: 100rpx;line-height: 100rpx;">
				<view class="fs14"><text class="fw600 ">订单号：</text>{{item.code}}</view>
				<view class="c-red fs14" v-if="item.status==0">全部</view>
				<view class="c-red fs14" v-if="item.status==1">待付款</view>
				<view class="c-red fs14" v-if="item.status==2">已预约</view>
				<view class="c-red fs14" v-if="item.status==3">检测中</view>
				<view class="c-red fs14" v-if="item.status==4">已检测</view>
			</view>
			<view class=" dis-flex flex-align-center pt20 pb15">
				<view class="wd30 center ">
					<image :src="item.serviceinfo.img" mode="" class="br5" style="width: 200rpx;height: 200rpx;"></image>
				</view>
				<view class=" ml15 wd70">
					<view class="fs16  ellipsis">
						{{item.serviceinfo.name}}
					</view>
					<view class="fs11  ellipsis c-999">
						检测地点：{{item.province}}{{item.city}}{{item.county}}
					</view>
					<view class="fs11  ellipsis c-999">
						检测车型：{{item.brand}}{{item.model}}
					</view>
					<view class="fs11  ellipsis c-999">
						检测时间：{{item.time}}
					</view>
					<view class="fs11  ellipsis c-999">
						全款金额：￥{{item.price}}
					</view>
					<view class="dis-flex flex-between mt5 flex-align-center">
						<view class="">￥{{item.deposit}}</view>
						<view class="c-999 fs10">{{item.create_time}}</view>
					</view>
				</view>
			</view>
			<view v-if="item.status ==1" @click="gopay(item.id)"  class="dis-flex flex-end flex-align-center" style="height: 120rpx;line-height: 120rpx;border-top: 1rpx solid #F1F1F1;">
				<view   class="bd-dd br5 center" style="width: 160rpx;height: 70rpx;line-height: 70rpx;">
					去付款
				</view>
			</view>
			<view  v-if="item.status ==4" class="dis-flex flex-end flex-align-center" style="height: 120rpx;line-height: 120rpx;border-top: 1rpx solid #F1F1F1;">
				<view @click="gojiance(item.id)" class="bd-dd br5 center" style="width: 220rpx;height: 70rpx;line-height: 70rpx;">
					查看检测报告
				</view>
			</view>
		</view>
		<view v-if="dataList == ''" class="">
			<u-empty  :show="true" text="暂无订单" mode="order" :margin-top="200"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '待付款'
				}, {
					name: '已预约',
				}, {
					name: '检测中',
				}, {
					name: '已检测',
				}],
				current: 0,//0全部 1待付款  2已预约  3检测中  4.已完成
				dataList: [],
			}
		},
		onLoad(e) {
			if(e.tag){
				this.current = e.tag
			}
			this.init()
		},
		methods: {
			init(){
				var json={
					uid:uni.getStorageSync('uid'),
					tag:this.current
				}
				this.$http.post(this.$config.UrlPostorderList, json).then((res) => {
					if (res.status == 1) {
						this.dataList = res.data
					} 
				})
			},
			tabsChange(index) {
				this.current = index
				this.init()
			},
			gojiance(oid){
				this.$api.openWindow("/pages/baogao/baogao?oid="+oid)
			},
			//微信支付
			gopay(id) {
				var that = this
				var json={
					uid:uni.getStorageSync('uid'),
					oid:id
				}
				that.$http.post(that.$config.UrlPostpayFunc, json).then((res) => {
					var data = res.data
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: 'MD5',
						paySign: data.paySign,
						success: function(res) {
							//支付成功后获取数据信息，跳转支付成功页面
							that.$api.toast('支付成功')
							that.current = 2
							this.init()
						},
						fail: function(err) {
							console.log(err)
							that.$api.toast('支付失败')
						}
					});
				})
			}
		}
	}
</script>

<style>
	page {
		background: #f1f1f1;
		color: #333333;
	}
</style>
